<template>
    <div>
<div>
            <van-tabs v-model:active="active">
                <van-tab title="关注">
                    <div class="gz"></div>
                </van-tab>
                <van-tab title="推荐">
                    <div v-for="item in sj" :key="item" class="card">
                        <h2>{{item.bt}}</h2>
                        <p style="margin-top: 15px;margin-bottom: 15px;">{{item.tit}}</p>
                        <p>{{item.pl}}</p>
                    </div>
                </van-tab>
                <van-tab title="资讯">内容 3</van-tab>
                <van-tab title="热榜">内容 4</van-tab>
                <van-tab title="动态">内容 4</van-tab>
                <van-tab title="有红包">内容 4</van-tab>
            </van-tabs>
        </div>
    </div>
</template>

<script setup>
import {ref} from 'vue'
let sj=ref([
    {bt:'luyixxiaoqingge',tit:"[Ubuntu20.04]安装",pl:'287阅读0评论'},
    {bt:'luyixxiaoqingge',tit:"[Ubuntu20.04]安装",pl:'287阅读0评论'},
    {bt:'luyixxiaoqingge',tit:"[Ubuntu20.04]安装",pl:'287阅读0评论'},
    {bt:'luyixxiaoqingge',tit:"[Ubuntu20.04]安装",pl:'287阅读0评论'},
    {bt:'luyixxiaoqingge',tit:"[Ubuntu20.04]安装",pl:'287阅读0评论'},
])
</script>

<style scoped>
.menu {
    width: 100%;
    margin: auto;
}
.card{
    height: 180px;
}
.gz{
    width: 200px;height: 200px;
    background: pink;
}
</style>